<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
        }
        .wrap{
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3>天气查询</h3>
        <p><input type="text" id="city"></p>
        <p><button id="btn">查询</button></p>
        <div id="container"></div>
    </div>
    <script>
        document.querySelector("#btn").onclick = function () {
            var city_value = document.querySelector("#city").value;
            // 测试数据

            ajax(city_value, function (data) {
                console.log('data:', data);
                //data是一个对象
                let html = `<li>
                                <p>${data.city}</p>
                                <p>${data.date}</p>
                                <p>${data.week} ${data.wea} ${data.win} ${data.win_meter} ${data.win_speed}</p>
                            </li>`
                
                document.querySelector("#container").innerHTML = html;
            })
        }

        /**
         * 
         * @site 用户查询的城市
         * @callback 请求到数据后的回调函数，在调用的时候才会传入，在数据获取到后会执行这个函数
        */
        function ajax(site, callback) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", 'https://www.tianqiapi.com/api?version=v6&appid=44852566&appsecret=LW4SDZwD&city=' + site)
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && /^2[\d]{2}/.test(xhr.status)) {
                    // console.log( xhr.responseText );
                    var data = JSON.parse(xhr.responseText);
                    // console.log(data);

                    callback(data);
                }
            }
        }
    </script>
</body>

</html>